<template>
    <div class="innerTableRow">
        <a-range-picker
            v-model="localDate"
            show-time
            :format="format"
        />
        <a-checkbox v-model="localChecked" @change="changeDate">{{i18n('form.date','日期')}}</a-checkbox>
    </div>

</template>

<script>
    import moment from "moment";

    export default {
        name: "rx-between-date",
        props:{
            value:{
                type:String,
                default:"{\"start\":\"\",\"end\":\"\"}"
            }
        },
        data(){
            return {
                labelCol: { span:6 },
                wrapperCol: { span:18 },

                localDate:[],

                format:"YYYY-MM-DD",

                longFormat:"YYYY-MM-DD HH:mm:ss",
                shortFormat:"YYYY-MM-DD",
                localChecked:true
            }
        },
        created(){
            this.init();
        },
        methods:{
            i18n(name,text,key){
                return this.$ti18(name,text,"formCellRender",key);
            },
            init(){
                if(this.value){
                    var json=JSON.parse(this.value);

                    if(json.start ){
                        this.localChecked=json.start.length==10;
                        this.format= this.localChecked?this.shortFormat:this.longFormat;
                    }

                    var start = moment(json.start,this.format);
                    var end = moment(json.end,this.format);

                    this.localDate=[start,end];
                }

            },
            emitVal(){
                var start= this.localDate[0].format(this.format);
                var end= this.localDate[1].format(this.format);
                var json={"start":start,"end":end};
                var jsonStr=JSON.stringify(json);
                this.$emit("input",jsonStr);

            },
            changeDate(e){

                this.localChecked=e.target.checked;

                this.format=this.localChecked?this.shortFormat:this.longFormat;

                this.emitVal();
            }
        },
        watch:{
            "localDate":function (val,oldVal) {
                this.emitVal();
            },
            "value":function (val,oldVal) {
                this.init();
            }
        }

    }
</script>

<style scoped>
.innerTableRow{
    display: flex;
    align-items: center;
}
.content{
    flex: 1;
}

</style>